<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>个人信息</title>
        <meta name="description" content="个人信息">
        <meta name="keywords" content="个人信息">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../plugins/elementui/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/style.css">
    </head>
    <body class="hold-transition" background="">
        <div id="app">
            <div class="content-header">
                <h1>个人信息</h1>
            </div>
            <div class="box" style="height: 750px">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-html="this.name"  style="width: 300px" readonly="true"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-html="this.password"  style="width: 300px" readonly="true"></el-input>
                    </el-form-item>
                </el-form>
                <div class="filter-container">
                    <el-button type="primary" class="butT" @click="changePassword()">修改密码</el-button>
                </div>
            </div>
            <!-- 新增标签弹层 -->
            <div class="add-form">
                <el-dialog title="修改密码" :visible.sync="dialogFormVisible4Edit">
                    <el-form :model="ruleForm" status-icon ref="ruleForm" :rules="rules" label-position="right" label-width="100px">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="新密码" prop="pass">
                                    <el-input type="password" v-model="ruleForm.pass"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="确认新密码" prop="checkPass">
                                    <el-input type="password" v-model="ruleForm.checkPass"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
                    </div>
                </el-dialog>
                </div>
            </div>
        </div>
    </body>
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
<!--    <script src="../js/getParameter.js"></script>-->
    <script>
        // var name = getParameter("name");
        var vue = new Vue({
            el: '#app',
            dialogFormVisible:false,
            data(){
                var validatePass = (rule, value, callback) => {
                    if (value == '') {
                        callback(new Error('请输入密码'));
                    }else {
                        if (this.ruleForm.checkPass !== '') {
                            this.$refs.ruleForm.validateField('checkPass');
                        }
                        callback();
                    }
                };
                var validatePass2 = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value !== this.ruleForm.pass) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                };
                return {
                    name : window.location.href.split("=")[1],
                    password: '',
                    form: {
                        name:'',
                        password:''
                    },
                    rules: {
                        pass: [
                            { validator: validatePass, trigger: 'blur' }
                        ],
                        checkPass: [
                            { validator: validatePass2, trigger: 'blur' }
                        ]
                    },
                    ruleForm: {
                        pass:'',
                        checkPass:''
                    },//表单数据
                    dialogFormVisible: false,//增加表单是否可见
                    dialogFormVisible4Edit:false,//编辑表单是否可见
                }

            },
            //钩子函数，VUE对象初始化完成后自动执行
            created() {
                this.findByName();
            },
            methods: {
                findByName(){
                    var form = {
                        name: this.name,
                    }
                    axios.post("/administrators/findByName.do",form).then((res) => {
                        this.password = res.data.password;
                    })
                },
                changePassword(){
                    this.dialogFormVisible4Edit = true;
                },
                submitForm(formName){
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.form.name= this.name;
                            this.form.password = this.ruleForm.pass;
                            axios.post("/administrators/editPassword.do",this.form).then((res) => {
                                if(res.data.flag){
                                    this.$message({
                                        type:'success',
                                        message:res.data.message
                                    });
                                }else{
                                    this.$message.error(res.data.message);
                                }
                            }).finally(() =>{
                                this.findByName();
                                this.dialogFormVisible4Edit = false;

                            });
                        }

                    });

                }
            }
        })
    </script>
</html>